<template>
<div>  
  <homeMenu/> 
  <div class="rule">
    <div class="rule-titleb">{{$t('user.rules')}}</div>
    <div class="rule-text1">{{$t('user.pportunitystak')}}</div>
    <div class="rule-titles">{{$t('user.Accelerate')}}</div>
    <div class="margin39">{{$t('user.rewardearlypar')}}</div>
    <div class="margin39">{{$t('user.incomeiscalcula')}}</div>
    <img class="img1" src="../assets/Q&A-img-formula.png" alt="">
    <div class="margin20">{{$t('user.numberofNb')}}</div>
    <div class="margin20">{{$t('user.percentagwil')}}</div>
    <div class="margin20">{{$t('user.proportioninfluence')}}</div>
    <img class="img2" src="../assets/pc_baifen.png" alt="">
    <div>{{$t('user.Cccelerationossib')}}</div>
    <div class="rule-titles">{{$t('user.Pools')}}</div>
    <div>NBC/TRX LP 21000</div>
    <div class="margin20">NBI/TRX LP 21000</div>
    <div>{{$t('user.Addingmorepoo')}}</div>
    <div class="rule-titles">{{$t('user.Address')}}</div>
    <!-- <div class="rule-titlen">NBC</div>
    <div>{{$t('user.TokenAddress')}}: TGbu32VEGpS4kDmjrmn5ZZJgUyHQiaweoq(记得替换)</div>
    <div>{{$t('user.PoolAddress')}}: TFasfbowrcRWbEhAh4TeoUjNKdun8QfxiL(记得替换){{$t('user.PoolAddress')}}</div>
    <div class="rule-titlen">NBI</div>
    <div>{{$t('user.TokenAddress')}}: TCFLL5dx5ZJdKnWuesXxi1VPwjLVmWZZy9(记得替换)</div>
    <div>{{$t('user.PoolAddress')}}: TFasfbowrcRWbEhAh4TeoUjNKdun8QfxiL(记得替换)</div> -->
    <div class="rule-titles">{{$t('user.DistributionTimetable')}}</div>
    <div class="margin39">{{$t('user.distributionfo')}}</div>
    <div class="margin20">WEEK_Pool1</div>
    <div class="rule-exle">
      <div class="rule-flex">
        <div>1</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-10-27 04:00</div>
          <div>2020-11-03 04:00</div>
          <div>10500</div>
          <div>10500</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>2</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-11-03 04:00</div>
          <div>2020-11-10 04:00</div>
          <div>5250</div>
          <div>15750</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>3</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-11-10 04:00</div>
          <div>2020-11-17 04:00</div>
          <div>2625</div>
          <div>18375</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>4</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-11-17 04:00</div>
          <div>2020-11-24 04:00</div>
          <div>1312.5</div>
          <div>19687.5</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>5</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-11-24 04:00</div>
          <div>2020-12-01 04:00</div>
          <div>656.25</div>
          <div>20343.75</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>6</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-12-01 04:00</div>
          <div>2020-12-08 04:00</div>
          <div>328.125</div>
          <div>20671.875</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>7</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-12-08 04:00</div>
          <div>2020-12-25 04:00</div>
          <div>164.0625</div>
          <div>20835.9375</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>8</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2020-12-25 04:00</div>
          <div>2021-1-1 04:00</div>
          <div>82.03125</div>
          <div>20917.96875</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>9</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2021-1-1 04:00</div>
          <div>2021-1-8 04:00</div>
          <div>41.015625</div>
          <div>20958.98438</div>
        </div>
      </div>
      <div class="rule-flex">
        <div>10</div>
        <div>
          <div>Start_time(UTC)</div>
          <div>End_time(UTC)</div>
          <div>NBI_mined</div>
          <div>Total_NBI_mined</div>
        </div>
        <div>
          <div>2021-1-8 04:00</div>
          <div>2020-1-15 04:00</div>
          <div>41.015625</div>
          <div>21000</div>
        </div>
      </div>
    </div>
    <div class="rule-titles">{{$t('user.Governance')}}</div>
    <div>{{$t('user.tokewouldbe')}}</div>
  </div>
  <homeFooter/>
</div>
</template>

<script>
import homeMenu from './public/homeMenu'
import homeFooter from './public/homeFooter'
export default {
  name: 'farmRulePage',
  components:{
    homeFooter,
    homeMenu
  }, 
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
   @media only screen and (min-width: 0px) and (max-width: 639px){
    .rule{
      width: 100%;
      padding: 0px 20px;
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      text-align: left;
      .rule-titleb{
        text-align: center;
        padding: 90px 0px 40px 0px;
        font-size: 30px;
        color: #fff;
      }
      .rule-text1{
        line-height: 30px;
      }
      .rule-titles{
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        padding: 76px 0px 24px 0px;
      }
      .margin39{
        margin-bottom: 39px;
        line-height: 24px;
      }
      .margin20{
        margin-bottom: 20px;
      }
      .img1{
        width: 100%;
        margin-bottom: 45px;
      }
      .img2{
        width: 100%;
        margin-bottom: 30px;
      }
      .rule-titlen{
        font-weight: bold;
        color: #fff;
        padding: 20px 0px;
      }
      .rule-exle{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        .rule-flex{
          width: 100%;
          height: 178px;
          border: 1px solid rgba(255,255,255,.3);
          display: flex;
          margin-bottom: 20px;
          >div:nth-child(1){
            width: 42px;
            text-align: center;
            line-height: 176px;
            border-right: 1px solid rgba(255,255,255,.3);
          }
          >div:nth-child(2){
            border-right: 1px solid rgba(255,255,255,.3);
            div{
              width: 146px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: rgba(255,255,255,.7);
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
          >div:nth-child(3){
            div{
              width: 158px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: #fff;
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
        }
      }
    }
   }
  @media only screen and (min-width: 639px){
    .rule{
      width: 800px;
      margin: 0 auto;
      font-size: 14px;
      color: rgba(255, 255, 255, .6);
      text-align: left;
      .rule-titleb{
        text-align: center;
        padding: 150px 0px 72px 0px;
        font-size: 30px;
        color: #fff;
      }
      .rule-text1{
        line-height: 30px;
      }
      .rule-titles{
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        padding: 76px 0px 24px 0px;
      }
      .margin39{
        margin-bottom: 39px;
        line-height: 24px;
      }
      .margin20{
        margin-bottom: 20px;
      }
      .img1{
        width: 504px;
        margin-bottom: 45px;
      }
      .img2{
        width: 764px;
        margin-bottom: 30px;
      }
      .rule-titlen{
        font-weight: bold;
        color: #fff;
        padding: 20px 0px;
      }
      .rule-exle{
        width: 740px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff;
        .rule-flex{
          width: 350px;
          height: 178px;
          border: 1px solid rgba(255,255,255,.3);
          display: flex;
          margin-bottom: 20px;
          >div:nth-child(1){
            width: 42px;
            text-align: center;
            line-height: 176px;
            border-right: 1px solid rgba(255,255,255,.3);
          }
          >div:nth-child(2){
            border-right: 1px solid rgba(255,255,255,.3);
            div{
              width: 146px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: rgba(255,255,255,.7);
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
          >div:nth-child(3){
            div{
              width: 158px;
              height: 44px;
              padding-left: 15px;
              line-height: 44px;
              font-size: 12px;
              color: #fff;
              border-bottom: 1px solid rgba(255,255,255,.3);
            }
            >div:nth-child(4){
              border-bottom: none;
            }
          }
        }
      }
    }
  }
  
</style>
